<template>
	<view>
		<image class="bg-img" :src="app_img+'/app-img/user1.jpg'"></image>
		<view class="choose-tab">
					<view class="choose-tab-item" :class="chooseTab == 0 ? 'active' : ''" data-choose="0" @click="clickTab">本月记录</view>
					<view class="choose-tab-item" :class="chooseTab == 1 ? 'active' : ''" data-choose="1" @click="clickTab">历史记录</view>
				</view>
				
				<view class="content">
					<view :style="chooseTab != 0 ? 'display:none' : ''">
						<view>
							<uni-calendar :insert="true" :lunar="true" :selected="selected" :start-date="'2022-1-1'" :end-date="'2023-1-1'" :showMonth="false" @change="clickTab"></uni-calendar>
						</view>
					</view>
					<view :style="chooseTab != 1 ? 'display:none' : ''" class="charts-box">
						历史记录
						
					</view>
				</view>
	</view>
</template>

<script>
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
	export default {
		components: {
		    uniCalendar,
		},
		data() {
			return {
				chooseTab: 0, //当前选中的选项卡：默认选中第一个~
				app_img:this.appimg,
				selected:[{
						   date: '2022-5-15',info: '未签到'
					   }, {
						   date: '2022-5-22',info: '未签到'
					   }, {
						   date: '2022-5-25',info: '未签到'
					   }, {
						   date: '2022-5-29',info: '未签到'
					   }]
				

			}
		},
		methods: {
			clickTab: function (e) { //点击切换
				this.chooseTab = e.target.dataset.choose;
				
				//如果是微信小程序，可使用该方法改变当前设置的值
				/*this.setData({
					chooseTab: e.target.dataset.choose
				})*/
			}
		}

	}
</script>

<style scoped>
.charts-box {
	display: flex;
    width: 100%;
    height: 300px;
}
.choose-tab {
		display: flex;
		flex-flow: row;
		justify-content: space-between;
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		border-bottom: 2rpx solid #ccc;
	}
	.choose-tab-item {
		width: 25%;
	}
	.active {
		color: red;
		border-bottom: 4rpx solid red;
	}


</style>
